<!DOCTYPE html>
<html>
  <head>
    <meta name="author" content="Ningyu Lei">
    <meta charset="UTF-8">
    <title>Homepage</title>
    <link rel="stylesheet" href="css/Ass1.css">
  </head>
  <body class="index-page">
    <header>
      <div class="logo">
          <img src="imgs/logo.jpg" alt="livheart logo">
      </div>
      <nav>
        <ul>
          <li><a href="index.html">HOMEPAGE</a></li>
          <li><a href="product.html">PRODUCTION</a></li>
          <li><a href="login.html">LOGIN</a></li>
          <li><a href="register.html">REGISTRATION</a></li>
          <li><a href="#">SHOPPING CART</a></li>
          <li><a href="about.html">ABOUT</a></li>
        </ul>
      </nav>
    </header>

    <main>
        <section class="search-section">
          <div class="search-content">
            <h2>Welcome to the liv heart!</h2>
            <form class="search-form">
              <input type="text" placeholder="search...">
              <button type="submit">Search</button>
            </form>
          </div>
        </section>
      
      <section class="product-list">
        <article>
          <img src="imgs/product1.jpg" alt="product1">
          <h2>Orcinus orca</h2>
          <p>LIVHEART Orcinus orca Plush Doll</p>
          <p class="price">$18</p>
          <button>Add to cart</button>
        </article>
        <article>
          <img src="imgs/product2.jpg" alt="product2">
          <h2>Polar bear</h2>
          <p>LIVHEART Polar Bear Sleeping Plush Pillow</p>
          <p class="price">$30</p>
          <button>Add to cart</button>
        </article>
        <article>
          <img src="imgs/product3.jpg" alt="product3">
          <h2>Penguin</h2>
          <p>LIVHEART Penguin Soothing Sleep Plush Pillow</p>
          <p class="price">$25</p>
          <button>Add to cart</button>
        </article>
        <article>
          <img src="imgs/product4.jpg" alt="product4">
          <h2>Jackrabbit</h2>
          <p>LIVHEART jackrabbit Pillow Plush Doll</p>
          <p class="price">$10</p>
          <button>Add to cart</button>
        </article>
        <article>
          <img src="imgs/product5.jpg" alt="product5">
          <h2>Teeming cat</h2>
          <p>LIVHEART Teeming Cat Plush Pillow</p>
          <p class="price">$20</p>
          <button>Add to cart</button>
        </article>
      </section>
    </main>

  </body>
</html>